<template>
	<view class="flow_wrap">
		<view class="flow_item" 
		v-for="(item,index) in flowOptions.flowList" :key="index"
		:style="[{'background-color':(flowOptions.flowItemBgColor == undefined || flowOptions.flowItemBgColor == '') ? '#868686' : flowOptions.flowItemBgColor,
		'color':(flowOptions.flowItemTextColor == undefined || flowOptions.flowItemTextColor == '' ? '#ffffff' : flowOptions.flowItemTextColor),
		'margin':(flowOptions.flowItemMargin == undefined || flowOptions.flowItemMargin == '') ? '5px' : flowOptions.flowItemMargin + 'px',
		'border-radius':(flowOptions.flowItemRadius == undefined || flowOptions.flowItemRadius == '') ? '0px' : flowOptions.flowItemRadius + 'px',
		'font-size':(flowOptions.flowItemTextSize == undefined || flowOptions.flowItemTextSize == '') ? '13px' : flowOptions.flowItemTextSize + 'px'
		}]"
		@tap.stop="flowItemClick(index)"
		>
			{{(flowOptions.flowItemValue == '' || flowOptions.flowItemValue == undefined)? item :item[flowOptions.flowItemValue] }}
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			flowOptions:{
				type:Object,
				default:function(){
					return {
						flowList:[],
						flowItemValue:'',
						flowItemBgColor:'',
						flowItemTextColor:'',
						flowItemTextSize:'',
						flowItemMargin:'',
						flowItemRadius:''
					}
				}
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			flowItemClick(index){
				this.$emit('flowItemClickBack',{clickIndex:index})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/uni_modules/bugking7-flow-view/components/bugking7-flow-view/bugking7-flow-view.scss';
</style>
